<template>
  <div id="app">
    <my-header>{{ headerTitle }}</my-header>
    <search-input
      :placeholder="placeholder"
      :maxlength="maxlength"
    ></search-input>

    <router-view v-slot="{ Component}">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </router-view>

 <!-- <router-view></router-view> -->
    <tab></tab>
  </div>
</template>

<script>
import MyHeader from "@/components/Header";
import Tab from '@/components/Tab';
import SearchInput from '@/components/SearchInput';


import { computed,watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default {
  name: "App",
  components: {
    MyHeader,
    Tab,
    SearchInput
  },
  setup() {
    const store = useStore();
    const state = store.state;
    const router = useRouter();

    router.push('/');
    store.commit('setPlaceholder', 'day')

    watch( ()=> {
      return router.currentRoute.value.name
    }, (value)=> {
      store.commit('setHeaderTitle', value)
      store.commit('setPlaceholder', value)
      store.commit('setMaxlength', value)
      store.commit('setField', value)
      store.commit('setErrorCode', 0)
    })

    return computed(() => state).value; // {}
  },
};
</script>

<style lang="scss" scoped>
</style>